<template>
  <div class="carousel-box">
    <div class="slider-bg box-sw"></div>
    <div class="swiper-box">
      <div class="swiper-container">
        <div
          class="swiper-wrapper"
          @touchstart="touchStart"
          @touchmove="touchMove"
          @touchend="touchEnd"
        >
          <div class="swiper-slide">
            <a href>
              <img
                src="//imgcps.jd.com/ling4/100004770263/5omL5py66LSt5a6e5oOg/5aSH6LSn6LaF5YC8/p-5c13515d82acdd181dcbdc39/5d5887cc/cr_1125x445_0_171/s1125x690/q70.jpg"
                alt
              />
            </a>
          </div>
          <div class="swiper-slide">
            <a href>
              <img
                src="//imgcps.jd.com/ling4/100004770263/5omL5py66LSt5a6e5oOg/5aSH6LSn6LaF5YC8/p-5c13515d82acdd181dcbdc39/5d5887cc/cr_1125x445_0_171/s1125x690/q70.jpg"
                alt
              />
            </a>
          </div>
          <div class="swiper-slide">
            <a href>
              <img
                src="//imgcps.jd.com/ling4/100004770263/5omL5py66LSt5a6e5oOg/5aSH6LSn6LaF5YC8/p-5c13515d82acdd181dcbdc39/5d5887cc/cr_1125x445_0_171/s1125x690/q70.jpg"
                alt
              />
            </a>
          </div>
          <div class="swiper-slide">
            <a href>
              <img
                src="//imgcps.jd.com/ling4/100004770263/5omL5py66LSt5a6e5oOg/5aSH6LSn6LaF5YC8/p-5c13515d82acdd181dcbdc39/5d5887cc/cr_1125x445_0_171/s1125x690/q70.jpg"
                alt
              />
            </a>
          </div>
          <div class="swiper-slide">
            <a href>
              <img
                src="//imgcps.jd.com/ling4/100004770263/5omL5py66LSt5a6e5oOg/5aSH6LSn6LaF5YC8/p-5c13515d82acdd181dcbdc39/5d5887cc/cr_1125x445_0_171/s1125x690/q70.jpg"
                alt
              />
            </a>
          </div>
        </div>
        <div class="swiper-pagination" ></div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
        <div class="indicator">
            <slot name="indicator" v-if="showIndicator && slideCount>1">
            <div v-for="(item, index) in slideCount" class="indi-item" :class="{active: index === currentIndex-1}" :key="index"></div>
            </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Shuffling",
  data: function () {
    return {
      slideCount: 0, // 元素个数
      totalWidth: 0, // swiper的宽度
      swiperStyle: {}, // swiper样式
      currentIndex: 1, // 当前的index
      scrolling: false, // 是否正在滚动
    };
  },
  mounted: function () {
    // 1.操作DOM, 在前后添加Slide
    setTimeout(() => {
      this.handleDom();
      // 2.开启定时器
      this.startTimer();
    }, 100);
  },
  methods: {
    /** 定时器操作*/
    startTimer: function () {
      this.playTimer = window.setInterval(() => {
        this.currentIndex++;
        this.scrollContent(-this.currentIndex * this.totalWidth);
      }, this.interval);
    },
    stopTimer: function () {
      window.clearInterval(this.playTimer);
    },
    /**
     * 滚动到正确的位置
     */
    scrollContent: function (currentPosition) {
      // 0.设置正在滚动
      this.scrolling = true;
      // 1.开始滚动动画
      this.swiperStyle.transition = "transform " + this.animDuration + "ms";
      this.setTransform(currentPosition);
      // 2.判断滚动到的位置
      this.checkPosition();
      // 4.滚动完成
      this.scrolling = false;
    },
    /**
     * 校验正确的位置
     */
    checkPosition: function () {
      window.setTimeout(() => {
        // 1.校验正确的位置
        this.swiperStyle.transition = "0ms";
        if (this.currentIndex >= this.slideCount + 1) {
          this.currentIndex = 1;
          this.setTransform(-this.currentIndex * this.totalWidth);
        } else if (this.currentIndex <= 0) {
          this.currentIndex = this.slideCount;
          this.setTransform(-this.currentIndex * this.totalWidth);
        }
        // 2.结束移动后的回调
        this.$emit("transitionEnd", this.currentIndex - 1);
      }, this.animDuration);
    },
    handleDom: function () {
      // 1.获取要操作的元素
      let swiperEl = document.querySelector(".swiper-wrapper");
      let slidesEls = swiperEl.getElementsByClassName("swiper-slide");

      // 2.保存个数
      this.slideCount = slidesEls.length;

      // 3.如果大于1个, 那么在前后分别添加一个slide
      if (this.slideCount > 1) {
        let cloneFirst = slidesEls[0].cloneNode(true);
        let cloneLast = slidesEls[this.slideCount - 1].cloneNode(true);
        swiperEl.insertBefore(cloneLast, slidesEls[0]);
        swiperEl.appendChild(cloneFirst);
        this.totalWidth = swiperEl.offsetWidth;
        this.swiperStyle = swiperEl.style;
      }

      // 4.让swiper元素, 显示第一个(目前是显示前面添加的最后一个元素)
      this.setTransform(-this.totalWidth);
    },
    setTransform: function (position) {
      this.swiperStyle.transform = `translate3d(${position}px, 0, 0)`;
      this.swiperStyle[ "-webkit-transform"] = `translate3d(${position}px), 0, 0`;
      this.swiperStyle["-ms-transform"] = `translate3d(${position}px), 0, 0`;
    },
    touchStart: function (e) {
      // 1.如果正在滚动, 不可以拖动
      if (this.scrolling) return;
      // 2.停止定时器
      this.stopTimer();
      // 3.保存开始滚动的位置
      this.startX = e.touches[0].pageX;
    },
    touchMove: function (e) {
      // 1.计算出用户拖动的距离
      this.currentX = e.touches[0].pageX;
      this.distance = this.currentX - this.startX;
      let currentPosition = -this.currentIndex * this.totalWidth;
      let moveDistance = this.distance + currentPosition;
      // 2.设置当前的位置
      this.setTransform(moveDistance);
    },
    touchEnd: function (e) {
      // 1.获取移动的距离
      let currentMove = Math.abs(this.distance);
      // 2.判断最终的距离
      if (this.distance === 0) {
        return;
      } else if (
        this.distance > 0 &&
        currentMove > this.totalWidth * this.moveRatio
      ) {
        // 右边移动超过0.5
        this.currentIndex--;
      } else if (
        this.distance < 0 &&
        currentMove > this.totalWidth * this.moveRatio
      ) {
        // 向左移动超过0.5
        this.currentIndex++;
      }
      // 3.移动到正确的位置
      this.scrollContent(-this.currentIndex * this.totalWidth);
      // 4.移动完成后重新开启定时器
      this.startTimer();
    },
    /**
     * 控制上一个, 下一个
     */
    previous: function () {
      this.changeItem(-1);
    },
    next: function () {
      this.changeItem(1);
    },
    changeItem: function (num) {
      // 1.移除定时器
      this.stopTimer();
      // 2.修改index和位置
      this.currentIndex += num;
      this.scrollContent(-this.currentIndex * this.totalWidth);
      // 3.添加定时器
      this.startTimer();
    },
  },
};
</script>

<style>
.swiper-wrapper {
  display: flex;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
</style>